<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="jq/jquery2.0/jquery-2.0.0.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <style>
        .col1{
            background:red;
        }
        .col2{
            background:green;
        }
        .col3{
            background:blue;
        }
        .col4{
            background:pink;
        }
    </style>
</head>
<body>
    <div class="container">

        <!-- 默认情况下独占一行 -->
        <div class="row">
            <div class="col1">col1</div>
            <div class="col2">col2</div>
            <div class="col3">col3</div>
            <div class="col4">col4</div>
        </div>

        <hr>

        <!-- 根据尺寸变化，当达到临界值会自动适应，匹配相应尺寸的设置，实现响应式布局 -->
        <div class="row">
            <div class="col1 col-xs-3 col-sm-2 col-md-1 col-lg-3">col1</div>
            <div class="col2 col-xs-3 col-sm-2 col-md-1 col-lg-3">col2</div>
            <div class="col3 col-xs-3 col-sm-2 col-md-1 col-lg-3">col3</div>
            <div class="col4 col-xs-3 col-sm-2 col-md-1 col-lg-3">col4</div>
        </div>
        <hr>

        <!-- 较大尺寸未设置时会继承较小尺寸 -->
        <div class="row">
            <div class="col1 col-xs-3">col1</div>
            <div class="col2 col-xs-3">col2</div>
            <div class="col3 col-xs-3">col3</div>
            <div class="col4 col-xs-3">col4</div>
        </div>

        <hr>

        <!-- 较小尺寸未设置时会默认独占一行 -->
        <div class="row">
            <div class="col1 col-lg-3">col1</div>
            <div class="col2 col-lg-3">col2</div>
            <div class="col3 col-lg-3">col3</div>
            <div class="col4 col-lg-3">col4</div>
        </div>

        <hr>

        <!-- 可以自定义每列所占的网格数，可以不同 -->
        <div class="row">
            <div class="col1 col-md-1">col1</div>
            <div class="col2 col-md-2">col2</div>
            <div class="col3 col-md-3">col3</div>
            <div class="col4 col-md-4">col4</div>
        </div>

        <hr>
        <!-- 总数不能超过12，超出时会另起一行显示 -->
        <div class="row">
            <div class="col1 col-md-3">col1</div>
            <div class="col2 col-md-4">col2</div>
            <div class="col3 col-md-3">col3</div>
            <div class="col4 col-md-4">col4</div>
        </div>
    </div>
    <hr>    
    <div class="container-fluid">
        <div class="row">
            <div class="col1 col-xs-3">col1</div>
            <div class="col2 col-xs-3">col2</div>
            <div class="col3 col-xs-3">col3</div>
            <div class="col4 col-xs-3">col4</div>
        </div>
    </div>
</body>
</html>